{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/bootstrap-dialog/bootstrap-dialog.css') }}" rel="stylesheet" type="text/css" media="all" />
    <link href="{{ asset('bundles/applicationbootstrap/css/fonts/font-awesome/font-awesome.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
	<script src="{{ asset('bundles/applicationbootstrap/js/bootstrap-dialog/bootstrap-dialog.js') }}" type="text/javascript"></script>
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        
        <div class="page-header">
            <h1>Modals (popup)</h1>
        </div>
        
        <div class="row">
          <div class="col-lg-6">
			<!-- Large modal -->
			<button class="btn btn-primary btn-lg" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
						
			<!-- Default modal -->
			<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal">Default modal</button>
						
			<!-- Small modal -->
			<button class="btn btn-primary btn-sm" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
          </div>
          <div class="col-lg-6">
			<button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-default">Default</button>
			<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-primary">Primary</button>
			<button class="btn btn-success" data-toggle="modal" data-target=".bs-example-modal-success">Success</button>
			<button class="btn btn-info" data-toggle="modal" data-target=".bs-example-modal-info">Info</button>
			<button class="btn btn-warning" data-toggle="modal" data-target=".bs-example-modal-warning">Warning</button>
			<button class="btn btn-danger" data-toggle="modal" data-target=".bs-example-modal-danger">Danger</button>
          </div>
        </div>
        
        <div class="page-header">
            <h1>bootstrap3-dialog
                <a class="btn btn-primary btn-xs" href="http://nakupanda.github.io/bootstrap3-dialog" target="_blank"><i class="fa fa-link"></i></a>
                <a class="btn btn-primary btn-xs" href="https://github.com/nakupanda/bootstrap3-dialog" target="_blank"><i class="fa fa-github"></i></a>
            </h1>
        </div>
        <div class="row">
        
          <div class="col-lg-4">
			<h3>Simplest</h3>
			<button class="btn btn-primary example1">Run the code example1</button>
			<br/><br/>

<pre><code>
BootstrapDialog.show({
    message: 'Hi Apple!'
});
</code></pre>

			<script type="text/javascript">
				$(".example1").click(function () {
					BootstrapDialog.show({
			        	message: 'Hi Apple!'
			        });
				});
			</script>
          </div>
          <div class="col-lg-4">
          	<h3>Dialog Title</h3>
			<button class="btn btn-primary example2">Run the code example2</button>
			<br/><br/>
			
<pre><code>
BootstrapDialog.show({
    title: 'Say-hello dialog',
    message: 'Hi Apple!'
});
</code></pre>

			<script type="text/javascript">
				$(".example2").click(function () {
					BootstrapDialog.show({
            			title: 'Say-hello dialog',
            			message: 'Hi Apple!'
        			});
				});
			</script>
          </div>
          <div class="col-lg-4">
			<h3>Manipulating Dialog Title</h3>
			<button class="btn btn-primary example3">Run the code example3</button>
			<br/><br/>

<pre><code>
BootstrapDialog.show({
    title: 'Default Title',
    message: 'Click buttons below.',
    buttons: [{
        label: 'Title 1',
        action: function(dialog) {
            dialog.setTitle('Title 1');
        }
    }, {
        label: 'Title 2',
        action: function(dialog) {
            dialog.setTitle('Title 2');
        }
    }, {
        label: 'Close',
        action: function(dialogItself){
	        dialogItself.close();
        }
    }]
});
</code></pre>

			<script type="text/javascript">
				$(".example3").click(function () {
			        BootstrapDialog.show({
			            title: 'Default Title',
			            message: 'Click buttons below.',
			            buttons: [{
			                label: 'Title 1',
			                action: function(dialog) {
			                    dialog.setTitle('Title 1');
			                }
			            }, {
			                label: 'Title 2',
			                action: function(dialog) {
			                    dialog.setTitle('Title 2');
			                }
			            }, {
			                label: 'Close',
			                action: function(dialogItself){
			                    dialogItself.close();
			                }
			            }]
			        });
				});
			</script>
          </div>
        </div>
        
    </div> <!-- /container -->
    
	<!-- Large modal -->
	<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	  <div class="modal-dialog modal-lg">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
	      </div>
	      <div class="modal-body">
	        ...
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary">Save changes</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	<!-- Default modal -->
	<div class="modal fade bs-example-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
	      </div>
	      <div class="modal-body">
	        ...
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary">Save changes</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	<!-- Small modal -->
	<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
	  <div class="modal-dialog modal-sm">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
	      </div>
	      <div class="modal-body">
	        ...
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary">Save changes</button>
	      </div>
	    </div>
	  </div>
	</div>

	<!-- bs-example-modal-default bootstrap-dialog type-default -->
	<div class="modal fade bs-example-modal-default bootstrap-dialog type-default" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
	      </div>
	      <div class="modal-body">
	        ...
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary">Save changes</button>
	      </div>
	    </div>
	  </div>
	</div>	
	
	<!-- bs-example-modal-primary bootstrap-dialog type-primary -->
	<div class="modal fade bs-example-modal-primary bootstrap-dialog type-primary" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
	      </div>
	      <div class="modal-body">
	        ...
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary">Save changes</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	<!-- bs-example-modal-success bootstrap-dialog type-success -->
	<div class="modal fade bs-example-modal-success bootstrap-dialog type-success" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
	      </div>
	      <div class="modal-body">
	        ...
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary">Save changes</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	<!-- bs-example-modal-info bootstrap-dialog type-info -->
	<div class="modal fade bs-example-modal-info bootstrap-dialog type-info" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
	      </div>
	      <div class="modal-body">
	        ...
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary">Save changes</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	<!-- bs-example-modal-warning bootstrap-dialog type-warning -->
	<div class="modal fade bs-example-modal-warning bootstrap-dialog type-warning" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
	      </div>
	      <div class="modal-body">
	        ...
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary">Save changes</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	<!-- bs-example-modal-danger bootstrap-dialog type-danger -->
	<div class="modal fade bs-example-modal-danger bootstrap-dialog type-danger" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
	      </div>
	      <div class="modal-body">
	        ...
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary">Save changes</button>
	      </div>
	    </div>
	  </div>
	</div>
{% endblock %}